/*
    Media Query Mixin

    Large (l) and Extra-Large (xl) are 'min-width' media queries,
    meaning they'll only appear on screens that are big enough.
    
    Medium (m), Small (s), and Extra-Small (xs) are max-width queries,
    meaning that they only appear on screens that are small enough.
    
    The 'density' queries are kind of heavy-duty, so use extra-sparingly. :)
    
    For high pixel-density images, you can use (retinahd), (retina) or (hdpi).
    
    
    Usage:  @include media-query(size){ [styles here] }
*/


@mixin media-query($media-query){

    @if $media-query == sl {
        @media only screen and (min-width:$media--l * 0.8) { @content; }
    }

    @if $media-query == ml {
        @media only screen and (min-width:$media--l * 0.9) { @content; }
    }

    @if $media-query == l {
        @media only screen and (min-width:$media--l) { @content; }
    }

    @if $media-query == hl {
        @media only screen and (min-width:$media--l * 1.1) { @content; }
    }

    @if $media-query == xl {
        @media only screen and (min-width:$media--xl) { @content; }
    }

    @if $media-query == xxl {
        @media only screen and (min-width:($media--xl * 1.1)) { @content; }
    }

    @if $media-query == xxxl {
        @media only screen and (min-width:($media--xl * 1.25)) { @content; }
    }

    @if $media-query == xxxxl {
        @media only screen and (min-width:($media--xl * 1.35)) { @content; }
    }

    @if $media-query == m {
        @media only screen and (max-width:$media--m) { @content; }
    }

    @if $media-query == sm { // halfway between 'medium' and 'small'
        @media only screen and (max-width:($media--s + ($media--m - $media--s)/2)) { @content; }
    }

    @if $media-query == s {
        @media only screen and (max-width:$media--s) { @content; }
    }

    @if $media-query == ms {
        @media only screen and (max-width:$media--s*0.85) { @content; }
    }

    @if $media-query == xs {
        @media only screen and (max-width:$media--xs) { @content; }
    }

    @if $media-query == min-m {
        @media only screen and (min-width:$media--m) { @content; }
    }

    @if $media-query == min-sm { // halfway between 'medium' and 'small'
        @media only screen and (min-width:($media--s + ($media--m - $media--s)/2)) { @content; }
    }

    @if $media-query == min-s {
        @media only screen and (min-width:$media--s) { @content; }
    }

    @if $media-query == min-ms {
        @media only screen and (min-width:$media--s*0.85) { @content; }
    }

    @if $media-query == min-xs {
        @media only screen and (min-width:$media--xs) { @content; }
    }

    @if $media-query == v-m {
        @media only screen and (max-height:$media--m) { @content; }
    }

    @if $media-query == v-s {
        @media only screen and (max-height:$media--s) { @content; }
    }

    @if $media-query == v-xs {
        @media only screen and (max-height:$media--xs) { @content; }
    }

    @if $media-query == v-xxs {
        @media only screen and (max-height:$landscape1-height),
               only screen and (max-height: $landscape2-height) and (min-width: $landscape2-width) { @content; }
    }

    @if $media-query == min-s--v-s or $media-query == teapot {
        // short and stout like a little teapot
        @media only screen and (min-width:$teapot-width) and (max-height:($teapot-height)) { @content; }
    }

    @if $media-query == reverse-teapot or $media-query == breadbox {
        // bigger than a breadbox?
        @media only screen and (min-width:$breadbox-width) and (min-height:$breadbox-height) { @content; }
    }

    @if $media-query == home_logo {
        @media only screen and (max-height: $media--xs) {
           @content;
        }
    }

    @if $media-query == hdpi {
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
               only screen and (-moz-min-device-pixel-ratio: 1.5),
               only screen and (min--moz-device-pixel-ratio: 1.5),
               only screen and (-ms-min-device-pixel-ratio: 1.5),
               only screen and (min-device-pixel-ratio: 1.5),
               only screen and (min-resolution: 144dppx) {
               // should be 144dpi, could be switched to 96 to support IE8 phones
            @content;
        }
    }

    @if $media-query == retina {
        @media only screen and (-webkit-min-device-pixel-ratio: 2),
               only screen and (-moz-min-device-pixel-ratio: 2),
               only screen and (min--moz-device-pixel-ratio: 2),
               only screen and (-ms-min-device-pixel-ratio: 2),
               only screen and (min-device-pixel-ratio: 2),
               only screen and (min-resolution: 192dppx) {
            @content;
        }
    }

    @if $media-query == retinahd {
        @media only screen and (-webkit-min-device-pixel-ratio: 3),
               only screen and (-moz-min-device-pixel-ratio: 3),
               only screen and (min--moz-device-pixel-ratio: 3),
               only screen and (-ms-min-device-pixel-ratio: 3),
               only screen and (min-device-pixel-ratio: 3),
               only screen and (min-resolution: 288dppx) {
            @content;
        }
    }
}

